import Vue from 'vue'
import Vuex from 'vuex'

// 引入可以发请求的axios
import axios from 'axios'

Vue.use(Vuex)

// 1. state 提供挂载数据的能力
const state = {
  list: []
}

// 2.0 actions 写业务的函数管理 - dispatch 触发
const actions = {
  async getData({ commit }) {
    const { data } = await axios('http://api.uixsj.cn/hitokoto/get?type=social')
    // console.log(data)
    commit('SAVE_ITEM', data)
  }
}

// 3.0 mutations 专门存数据，也只有这里的函数有能力操作数据
const mutations = {
  SAVE_ITEM(state, val) {
    state.list.push(val)
  }
}

// 4.0 getters 拥有计算属性的特点，和过滤器的美化作用集合
const getters = {
  arrNum(state) {
    return state.list.length
  }
}

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})
